<template>
	<div ref="mapRef" class="card content-box"></div>
</template>

<script setup lang="ts">
import { ref, unref, onMounted, nextTick } from 'vue'
import { GAODE_MAP_SDK_URL } from '@/config/config'
import { useScript } from '@/hooks/useScript'
const mapRef = ref<HTMLDivElement | null>()
const { toPromise } = useScript({ src: GAODE_MAP_SDK_URL })

async function initMap() {
	await toPromise()
	await nextTick()
	const wrapEl = unref(mapRef)
	if (!wrapEl) return
	const AMap = (window as any).AMap
	new AMap.Map(wrapEl, {
		zoom: 11,
		// center: [116.397428, 39.90923],
		viewMode: '3D'
	})
}

onMounted(() => {
	initMap()
})
</script>
